<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>房间管理</span>
        <el-button type="primary" @click="openCreateRoomDrawer">新增房间</el-button>
      </div>
    </template>
    <el-table :data="tableData" stripe :height="600" style="width: 100%">
      <el-table-column prop="roomType" label="房型"/>
      <el-table-column prop="hotelName" label="所属酒店"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="availableCount" label="可用数量"/>
      <el-table-column prop="breakfast" label="含早">
        <template #default="{ row }">
          {{ row.breakfast === '1' ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" circle @click="openUpdateRoomDrawer(row)"/>
          <el-button type="danger" :icon="Delete" circle @click="handleDelete(row.roomType, row.hotelName)"/>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination background layout="total, sizes, prev, pager, next"
                     v-model:current-page="pageIndex"
                     v-model:page-size="pageSize"
                     :page-sizes="[10, 20, 50, 100]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :total="total"/>
    </div>
    <create-room ref="createRoomRef" @refresh="initData"/>
    <update-room ref="updateRoomRef" @refresh="initData"/>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getRoomList, deleteRoom } from '@/api/room'
import { Edit, Delete } from '@element-plus/icons-vue'
import CreateRoom from './components/CreateRoom.vue'
import UpdateRoom from './components/UpdateRoom.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
const total = ref(0)
const pageIndex = ref(1)
const pageSize = ref(20)
const createRoomRef = ref()
const updateRoomRef = ref()

const initData = () => {
  console.log('开始获取房间列表数据...');
  
  getRoomList({ pageIndex: pageIndex.value, pageSize: pageSize.value }).then(res => {
    console.log('获取房间列表响应:', res);
    
    // 正确处理后端响应
    const result = res.data;
    console.log('后端返回的原始数据结构:', result);
    
    if (result && result.code === 200 && result.data) {
      // 直接使用后端返回的数据
      tableData.value = result.data;
      total.value = result.data.length;
      
      console.log('处理后的房间数据:', tableData.value);
      
      // 检查数据结构中的字段名
      if (tableData.value.length > 0) {
        console.log('第一条房间数据的字段名:', Object.keys(tableData.value[0]));
      }
    } else {
      console.error('获取房间列表失败:', result);
      ElMessage.error(result?.msg || '获取房间列表失败');
    }
  }).catch(error => {
    console.error('获取房间列表错误:', error);
    ElMessage.error('网络错误，获取房间列表失败');
  });
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  initData()
}
const handleCurrentChange = (index: number) => {
  pageIndex.value = index
  initData()
}
const openCreateRoomDrawer = () => {
  createRoomRef.value.open()
}
const openUpdateRoomDrawer = (row: any) => {
  updateRoomRef.value.open(row)
}
const handleDelete = (roomType: string, hotelName: string) => {
  ElMessageBox.confirm('确定要删除该房间吗？', '提示', { type: 'warning' }).then(() => {
    deleteRoom(roomType, hotelName).then(res => {
      console.log('删除房间响应:', res);
      
      const result = res.data;
      if (result && result.code === 200) {
        ElMessage.success('删除成功')
        initData()
      } else {
        ElMessage.error(result?.msg || '删除失败')
      }
    }).catch(error => {
      console.error('删除房间错误:', error);
      ElMessage.error('网络错误，删除房间失败');
    });
  })
}
onMounted(() => {
  initData()
})
</script>
<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; }
.pagination-box { padding-top: 16px; display: flex; justify-content: right; }
</style>
